<template>
  <div class="banner">
    分类 - {{ category.categoryName }} <br>
    <span style="font-size: 0.5em;color: #ece6e6">合计{{ category.blogCount }} 篇博客</span>
  </div>
  <br>
  <el-row  justify="center">
    <el-col :span="4" :xs="0" :sm="1" :md="2" :lg="3"></el-col>
    <el-col :span="18" :xs="24" :sm="22" :md="20" :lg="18">
      <div v-if="category.blogCount>0" style="display: flex;flex-wrap:wrap">
        <el-card v-for="item in blogs" style="width: 23%;margin: 10px 0.5%"
                 :body-style="{padding:'0px'}">
          <el-image :src="item.blogImg"
                    fit="cover"
                    @click="toViewBlog(item.blogId)"
                    style="width: 100%;height: 180px">
          </el-image>
          <div style="padding: 10px">
            <el-link class="blog_title" @click="toViewBlog(item.blogId)">{{ item.blogTitle }}</el-link>
            <el-divider></el-divider>
            <span><el-icon><Clock/></el-icon>：{{ item.releaseTime }}</span> <br>
            <el-icon>
              <Discount/>
            </el-icon>
            ：
            <el-tag v-for="tag in item.tags" :key="item.tagId">{{ tag.tagName }}</el-tag>
          </div>
        </el-card>
      </div>
      <el-card v-else style="height: 40vh;text-align: center;padding-top: 100px">
        <h2 style="font-weight: bolder;color: #257763">当前分类没有博客</h2>
      </el-card>
    </el-col>
    <el-col :span="4" :xs="0" :sm="1" :md="2" :lg="3"></el-col>
  </el-row>
  <br>
</template>

<script>
export default {
  name: "CategoryShow",
  props: ['categoryId'],
  created() {
    this.init()
  },
  data() {
    return {
      category: {},
      blogs: []
    }
  },
  methods: {
    async init() {
      let {data: result1} = await this.$http.get("/api/category/getCategoryById", {params: {categoryId: this.categoryId}})
      this.category = result1.dataMap.category
      let {data: result2} = await this.$http.get("/api/blog/getBlogByCategoryId", {params: {categoryId: this.categoryId}})
      this.blogs = result2.dataMap.blogs

    },
    toViewBlog(blogId) {
      this.$router.push({path: '/article/' + blogId})
    }
  }
}
</script>

<style scoped>
.banner {
  background-image: url('/headImg/category_show.jpg');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;

  color: #ffffff;
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
  padding-top: 200px;
}

.blog_title {
  font-weight: bolder;
}
</style>